<template>
  <div>
    <el-container class="common-layout">
      <el-main>
        <div class="divs">
          <span class="title">
            <el-icon>
              <House />
            </el-icon>
            统计报表/<span style="color: #0098ff">订单统计</span>
          </span>
        </div>
        <div
          style="
            background-color: #F5F9FF;
            padding: 10px;
            text-align: center;
            border-radius: 10px;
            width: 1100px;
            margin-left: 35px;
          "
        >
          <el-row :gutter="20">
            <el-col :span="8">
              <el-form-item label="选择日期:" prop="value">
                <el-select
                  v-model="yeartime"
                  placeholder="选择年份"
                  style="width: 240px"
                  @change="handleChange"
                >
                  <el-option
                    v-for="item in years"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <div>
          <div style="padding-right: 1000px">
            <span style="font-size: 20px">订单趋势</span>
          </div>
          <div ref="chartRef" style="width: 1200px; height: 400px"></div>
        </div>
        <div>
          <div style="padding-right: 1000px">
            <span style="font-size: 20px">订单列表</span>
          </div>
          <div style="padding-left: 90px">
            <el-table :data="tableData" style="width: 1200px; height: 410px">
              <!-- <el-table-column type="selection" width="55" /> -->
              <el-table-column
                property="ord_id"
                label="订单id"
                width="120"
                v-if="false"
              />
              <el-table-column
                property="ord_number"
                label="订单号"
                width="120"
              />
              <el-table-column
                property="ord_startaddress"
                label="始发地"
                width="120"
              />
              <el-table-column
                property="ord_destination"
                label="目的地"
                width="120"
              />
              <el-table-column
                property="client_name"
                label="客户名称"
                width="120"
              />
              <el-table-column
                property="ord_state"
                label="订单状态"
                width="120"
              >
                <template #default="scope">
                  <span>{{ formatOrderState(scope.row.ord_state) }}</span>
                </template>
              </el-table-column>
              <el-table-column
                property="ord_source"
                label="货物类型"
                width="120"
              />
              <el-table-column
                property="ord_remark"
                label="货物数量"
                width="120"
              />
              <el-table-column
                property="totalvolume"
                label="总体积"
                width="120"
              />
              <el-table-column property="weight" label="总重量" width="120" />
              <el-table-column
                property="freight_count"
                label="运费合计"
                width="120"
              />
              <el-table-column
                property="ord_time"
                label="下单时间"
                width="120"
              />
            </el-table>
          </div>
          <div style="float: right">
            <el-pagination
              v-model:current-page="currentPage"
              v-model:page-size="PageSize"
              :page-sizes="[10, 20, 30, 40]"
              :size="size"
              :disabled="disabled"
              :background="background"
              layout="total, sizes, prev, pager, next, jumper"
              :total="count"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import $http from "@/axios/base.js";
import * as echarts from "echarts";
export default {
  setup() {
    const chartRef = ref(null);
    let Year = ref([]); //月份下拉框
    let years = ref([]);
    let yeartime = ref("");
    let month = ref([
      "01",
      "02",
      "03",
      "04",
      "05",
      "06",
      "07",
      "08",
      "09",
      "10",
      "11",
      "12",
    ]); //曲线图的x轴
    let month2 = ref([]); //曲线图y轴
    // let month3=ref(['10','20']);
    let month3 = ref([]);
    let tableData = ref([]); //订单表数据
    let currentPage = ref(1); //页
    let PageSize = ref(10); //条数
    let count = ref(""); //数据总数量

    function show2() {
      //给年份下拉框
      years.value = Year.value.map((year) => ({ value: year, label: year }));
    }

    function handleChange(value) {
      //年份下拉框改变事件
      show3(value);
    }

    const initChart = () => {
      //曲线图
      if (chartRef.value) {
        const myChart = echarts.init(chartRef.value);
        // 设置图表的配置项和数据
        myChart.setOption({
          xAxis: {
            type: "category",
            data: month.value,
          },
          yAxis: {
            type: "value",
          },
          axisPointer: { show: false }, // 禁用 axisPointer
          series: [
            {
              data: month2.value,
              type: "line",
              smooth: true,
            },
          ],
        });
      }
    };

    onMounted(() => {
      initChart();
      show();
      show4();
      show5();
    });

    function show() {
      //查询订单表创建时间的年份
      $http
        .get(`http://localhost:5261/api/Order_statistics/GetOrder_time_year`)
        .then((res) => {
          Year.value = res;
          console.log(Year.value);
          show2();
          show3();
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function show3(value) {
      //曲线图y轴
      if (value == "" || value == null || value == undefined) {
        value = new Date().getFullYear().toString();
      }
      $http
        .get(`http://localhost:5261/api/Order_statistics/Get_time_sum/${value}`)
        .then((res) => {
          var list = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          res.forEach((item) => {
            list.splice(item.month - 1, 0, item.sum);
          });
          month2.value = list;
          initChart();
          console.log(month2.value);
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function show4() {
      //订单表数据
      $http
        .get(
          `http://localhost:5261/api/Order/GetOrders?currentPage=` +
            currentPage.value +
            `&PageSize=` +
            PageSize.value
        )
        .then((res) => {
          tableData.value = res;
          console.log(tableData.value);
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function formatOrderState(status) {
      //转换订单状态
      switch (status) {
        case 1:
          return "待接单";
        case 2:
          return "待提货";
        case 3:
          return "待发车";
        case 4:
          return "运输中";
        case 5:
          return "待签收";
        case 6:
          return "已完成";
        case 7:
          return "已取消";
        case 8:
          return "已拒绝";
        default:
          return "未知状态";
      }
    }

    function show5() {
      //查询数据总数量
      $http
        .get(`http://localhost:5261/api/Order_statistics/Count3`)
        .then((res) => {
          count.value = res;
        })
        .catch((err) => {
          console.log("错误:" + err);
        });
    }

    function handleSizeChange(value) {
      //条数的改变事件
      PageSize.value = value;
      show4();
    }

    function handleCurrentChange(value) {
      //页面的改变事件
      currentPage.value = value;
      show4();
    }

    return {
      chartRef,
      Year,
      years,
      yeartime,
      month,
      month3,
      handleChange,
      tableData,
      currentPage,
      PageSize,
      formatOrderState,
      count,
      handleSizeChange,
      handleCurrentChange,
    };
  },
};
</script>

<style scoped>
.common-layout {
  /* box-shadow: 0px 15px 25px rgba(0, 0, 0, 0.5); */
  background-color: #fff;
  height: 700px;
  width: 1250px;
  margin: auto;
  padding: auto;
  /* margin: 50px; */
  /* display: flex;
    align-items: center; */
}

.title {
  padding-right: 1000px;
  padding-top: 20px;
}

.el-row {
  margin-bottom: 20px;
  background-color: #fff
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
  background-color: aqua;
}
</style>